import { Table, Switch ,Pagination,Divider,Card,message,Input} from "antd";
import React, { useState,useEffect } from "react";
import {useHistory} from "react-router-dom";
import {getDataList,getDataByAccount} from "../service"

const AdminMag = () => {
  const [selectedRowKeys, setSelectedRowKeys] = useState([]);
  const onChange = (checked) => {};
  const history = useHistory();
  const pageSize = 10;
  const [dataSoucre,setDataSource] = useState([]);
  const [count,setCount] = useState(0);
  const [page,setPage]= useState(0);
  const { Search } = Input;
  // 表头
  const columns = [
    {
      title: "用户名",
      dataIndex: "u_username",
      width: 1,
    },
    {
      title: "账号",
      dataIndex: "u_account",
      width: 3,
    },
    {
      title: "角色",
      dataIndex: "r_name",
      width: 1,
    },
    {
      title: "手机号码",
      dataIndex: "u_phone",
      width: 2,
    },
    {
      title: "是否启用",
      dataIndex: "u_enable",
      width: 1,
      render() {
        return (
          <Switch
            checkedChildren="启用"
            unCheckedChildren="禁用"
            defaultChecked
            onChange={onChange}
          />
        );
      },
    },
    {
      title: "添加时间",
      dataIndex: "u_add_time",
      width: 2,
    },
    {
      title: "操作",

      width: 1,
    },
  ];
  const data = [];


  const onSelectChange = (newSelectedRowKeys) => {
    console.log("selectedRowKeys changed: ", selectedRowKeys);
    setSelectedRowKeys(newSelectedRowKeys);
  };
  const rowSelection = {
    selectedRowKeys,
    onChange: onSelectChange,
    selections: [
      Table.SELECTION_ALL,
      Table.SELECTION_INVERT,
      Table.SELECTION_NONE,
      {
        key: "odd",
        text: "Select Odd Row",
        onSelect: (changableRowKeys) => {
          let newSelectedRowKeys = [];
          newSelectedRowKeys = changableRowKeys.filter((_, index) => {
            if (index % 2 !== 0) {
              return false;
            }

            return true;
          });
          setSelectedRowKeys(newSelectedRowKeys);
        },
      },
      {
        key: "even",
        text: "Select Even Row",
        onSelect: (changableRowKeys) => {
          let newSelectedRowKeys = [];
          newSelectedRowKeys = changableRowKeys.filter((_, index) => {
            if (index % 2 !== 0) {
              return true;
            }

            return false;
          });
          setSelectedRowKeys(newSelectedRowKeys);
        },
      },
    ],
  };
  // 获取数据
  const getDataListApi = async (nowPage,seachData ={}) =>{
    // 网络请求数据
    const payload = {
      page: nowPage,
      pageSize,
      ...seachData
    };
    // 进行网络请求
    getDataList(payload).then((res)=>{
      const {code,newArr,msg,count} = res || {}
      // console.log('newArr',newArr)
      if(code) {
         return message.error(msg)
      }
      setDataSource(newArr);
      setCount(count);
      setPage(nowPage);
    });
  }
   // 根据账号查询数据
   const onSearch = async (value) => {
    const payload = {
      account: value
    }
    // 进行网络请求
    getDataByAccount(payload).then((res)=>{
      const {code, data, msg} = res || {}
      if(code){
        return message.error(msg);
      }
      setDataSource(data);
      setCount(1);
      setPage(1)
    })

  }
// 挂载
useEffect(()=>{
  getDataListApi(1);
},[])
return (
  <>
  <Card title='管理员管理'
    key="u_id"
  >
   
    <Search
    placeholder="请输入账号"
    allowClear
    enterButton="搜索"
    style={{
      width: 300,
      float: 'right'
    }}

    onSearch={onSearch}
  />

    <Divider />

    {/* table显示 */}
    <Table
      scroll={{y:"500px", x:"1200px"}}
      rowkey = "u_id"
      // 表头
      columns={columns}
      // 查询返回的数据
      dataSource={dataSoucre}
      // 去除table提供的默认分页
      pagination={false}
      rowSelection={rowSelection}
    ></Table>
    <Pagination
      simple
      current={page}
      pageSize={pageSize}
      total={count}
      onChange={(page,pageSize)=>{
        console.log("页面改变",page,pageSize);
        getDataListApi(page);
      }}
    />
  </Card>
  </>
)


};

export default AdminMag;
